<template>
  <div class="dialog">
    <!-- 标题 -->
    <!-- 下面提供了name的插槽，叫做具名插槽 -->
    <slot name="title">
      <h3>默认的标题</h3>
    </slot>
    <hr />
    <!-- 内容 -->
    <div>
      <!-- 反向给父组件传递数据的插槽，叫做作用域插槽 -->
      <slot name="content" uname="zs" age="20">
        <p>默认的内容</p>
      </slot>
    </div>
    <!-- 按钮 -->
    <!-- 没有设置name属性的插槽，其实也有名字，叫做default；这种插槽叫做默认插槽 -->
    <slot height="100" weight="80">
      <button>确认</button>
    </slot>
    <!-- 由于标题、内容、按钮，都不应该写死，所以这里使用插槽 -->
    <!-- 插槽，理解为一个占位符，表示这里一会要放内容，内容由使用者（父组件）提供 -->
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.dialog {
  padding: 10px;
  margin: 10px;
  border: solid 3px black;
  box-shadow: 5px 5px 5px 5px;
  border-radius: 5px;
}
</style>
